<template>
	<div class="Header-blog">
		<div class="Header-blogs">
			<el-container class="Login-el-container">
				<el-header class="container-header">
					<div class="header-x" id="layout-header">
						<div class="header-img">
							<img src="../assets/logo.png">
							<span>夏野</span>
						</div>
						<div class="site-menus" v-show="Authorization != ''">
							<div class="site-menus-right" @click="articles">
								发布文章
							</div>
							<div class="site-menus-right" @click="handleClose">
								退出登录
							</div>
						</div>
					</div>
				</el-header>
			</el-container>
		</div>
		<el-dialog title="提示" :visible.sync="centerDialogVisible" width="20%" center>
			<span>确认退出吗</span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="centerDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="logout">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import {mapState} from 'vuex'
	import store from '../store/index.js'
	export default {
		name: "Header-blog",
		computed: {
			...mapState(
				// 映射 this.routertitle 为 this.$store.state.routertitle
				['Authorization'],
			),
		},
		data() {
			return {
				centerDialogVisible: false
			}
		},
		methods: {
			handleClose() {
				this.centerDialogVisible = true
			},
			logout(){
				this.$api.get('/logout').then(res=>{
					this.centerDialogVisible=false
					if(!res)return
					if(res.data.code=='1111'){
						store.commit('saveAuthorization', '')
						localStorage.setItem('Authorization','')          
						this.$message.success('成功退出');
					}
				})
			},
			articles(){
				this.$router.push('/Eidpublishing')
			}
		}
	}
</script>

<style scoped lang="less">
	.Header-blogs {
		width: 100%;
		height: 80px;
	}

	.container-header {
		.header-x {
			height: 80px;
			padding: 0 60px;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.header-img {
				width: 56px;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-wrap: wrap;

				img {
					width: 56px;
					height: 56px;
				}
			}
		}
	}

	@media (max-width: 600px) {
		#layout-header {
			padding: 0 10px;
		}
	}

	@media (max-width: 960px) {
		#layout-header {
			padding: 0 10px;
		}
	}

	.site-menus {
		display: flex;
		align-items: center;
		justify-content: center;

		.site-menus-right {
			margin-right: 20px;
		}
	}
</style>
